<template>
    <el-row class="secgMan">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
<!--            <el-input placeholder="请输入内容" style="width: 300px;margin-right: 20px;"></el-input>-->
<!--            <el-button type="primary" style="width: 100px;">搜索</el-button>-->
            <el-button type="primary" @click="addVouer" style="width: 100px;position: absolute;right: 0;">新增</el-button>
        </el-row>
        <el-table :data="secgs"
                  highlight-current-row
                  height="450"
                  width = "500"
                  max-height="450"
                  size="mini"
                  @current-change="secgChge"
                  style="font-size: 16px;"
                  :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                  border
                  >
            <el-table-column prop="name" label="凭证类型" min-width="200"></el-table-column>
            <el-table-column prop="instName" label="凭证代码" min-width="120"></el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="editSecg(scope.row)"
                               style="font-size: 16px;line-height: 10px;">修改
                    </el-button>
                    <el-button type="text" size="mini" @click="delSecg(scope.row)"
                               style="font-size: 16px;line-height: 10px;">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="pagination">
            <el-pagination
                    @size-change="sizeChge"
                    @current-change="pgChge"
                    :current-page="secgPage.currentPage"
                    :page-sizes="[15, 50, 100, 200]"
                    :page-size="secgPage.pageSize"
                    layout="->, sizes, prev, pager, next, jumper, total"
                    :total="secgPage.totalElements">
            </el-pagination>
        </el-row>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addVouer v-if="addShow" slot="edit" @editState="editState" :user="this.user"></addVouer>
                <editSecg v-if="editShow" slot="edit" :secgUuid="uuid" @editState="editState"></editSecg>
            </floatingBox>
        </transition>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo} from '../../../utils/webUtils.js';
    import floatingBox from "../../public/floatingBox.vue";
    import editSecg from "./editVouer.vue";
    import addVouer from "./addVouer.vue";

    export default {
        name: "SecgMan",
        components: {floatingBox, addVouer, editSecg},
        data() {
            return {
                formAlignLeft: 'left',
                editBoxShow: false,
                addShow: false,
                editShow: false,
                secgEdit: false,
                uuid: '',
                secgs: [],
                secgPage: {
                    pageSize: 15,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {}
                }
            }
        },
        props: {
            user: {
                type: Object
            }
        },
        mounted() {
            console.log(this.user)
            this.querySecgs();
        },
        methods: {
            editState(msg) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.querySecgs();
            },
            addVouer() {
                this.editBoxShow = true;
                this.addShow = true;
            },
            editSecg(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
            },
            secgChge( val ) {
                if (this.secgEdit) {
                    this.uuid = val.uuid;
                }
            },
            querySecgs: function () {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/secg/search/findAll",
                    params: getDataForSP(this.secgPage)
                }).then(response => {
                    this.secgs = response.data.content;
                    writePageInfo(this.secgPage, response.data);
                }).catch(error => {
                    console.log(error);
                });
            },
            pgChge: function (currentPage) {
                this.secgPage.currentPage = currentPage;
                this.querySecgs();
            },
            sizeChge: function (pageSize) {
                this.secgPage.pageSize = pageSize;
                if (this.secgPage.currentPage === 1) {
                    this.querySecgs();
                }
                this.secgPage.currentPage = 1;
            },
            delSecg: function (obj) {
                let _this = this;
                this.$confirm('是否确认删除 ' + obj.name, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.request({
                        method: "delete",
                        url: "./kwp/kdi/secg/" + obj.uuid,
                        headers: {},
                        data: {}
                    }).then(() => {
                        _this.querySecgs();
                        this.$message({
                            message: '删除安全组成功',
                            type: 'success'
                        });
                    }).catch(error => {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .secgMan {
        margin-right: 30px;
    }


</style>